<!doctype html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>-uu-box-reflect</title>
<style type="text/css">
@import url(../../README.css);
body {
  width: 600px;
}
.view {
  padding: 20px;
}
.gradation-box {
  border: 1px solid rgb(204, 204, 204);
  -uu-box-shadow: skyblue 0px 3px 20px;
  background-image:
    -uu-gradient(linear, left top, left bottom, from(white),
                     color-stop(0.1, white), to(rgb(205, 221, 241)));
  -uu-border-radius: 2em;
  -uu-border-top-left-radius: 0px;
  display: block;
  margin: 20px;
  height: 160px;
  padding: 10px;
  text-shadow: white 0px 1px 0px;
  vertical-align: top;
  position: relative;
}
.gradation-box > * {
  margin-left: 80px;
}
.gradation-box > .view {
  margin-left: 0;
  display: block;
  float: left;
}
.reflect {
  -uu-box-reflect: below 0px
      -uu-gradient(linear, left top, left bottom, from(transparent),
                       color-stop(0.65, transparent), to(white));
}
.canvas-view {
  position: absolute;
  right: -30px;
  bottom: -30px;
}
h1 {
  color: blue;
  font-size: 36px;
  line-height: 1;
  font-family: Helvetica, sans-serif;
  margin-top: 20px;
  padding: 0;
  text-shadow: gray 2px 2px 2px;
}

html.ifie6 .canvas-view {
  bottom: 60px;
}
</style>
<script type="text/xaml" id="xaml"><?xml version="1.0"?>
  <Canvas xmlns="http://schemas.microsoft.com/client/2007"></Canvas></script>
<script>
window.UUMETA_IMAGE_DIR = "../../img";
</script>
<!--
<script src="../../../src/uuMeta.js"></script>
<script src="../../../src/uuResize.js"></script>
<script src="../../../src/uuStyle.js"></script>
<script src="../../../src/uuStyleSheet.js"></script>
<script src="../../../src/uuQuery.js"></script>
<script src="../../../src/uuColor.js"></script>
<script src="../../../src/uuCanvas.js"></script>
<script src="../../../src/uuLayer.js"></script>
<script src="../../../src/uuAltCSS.js"></script>
<script src="../../../src/uuAltCSS+.js"></script>
<script src="../../../src/uuPolygon.js"></script>
<script>
function boot() {
  var meta = uuMeta,
      query = uuQuery;

  uuCanvas.ready(function() {
    var poly = new uuPolygon({ fps: 50 });
    poly.add({ highLight: 0x20, color: 0x000000, x: 60, y: 60, zoom: 350 });
    poly.add({ highLight: 0x40, color: 0x0000cc, x: 60, y: 60, zoom: 250 });
    poly.draw(query.id("canvas").getContext("2d"), 0);

    var canvas = query.id("canvas");

    meta.event.bind(canvas, meta.ie ? "mouseenter" : "mouseover",
                    function(evt) { poly.draw(canvas.getContext("2d"), 1); });
    meta.event.bind(canvas, meta.ie ? "mouseleave" : "mouseout",
                    function(evt) { poly.stop(); });
  });
}
</script>
 -->

</head>
<body>

<div class="view" id="toplayer">
  <div class="gradation-box">
    <div class="view">
      <img class="reflect" src="../../img/upapa.jpg" />
    </div>
    <h1>uuAltCSS.js</h1>
    <p class="link">
      <a href="http://code.google.com/p/uupaa-js-spinoff/">uupaa-js-spinoff project</a>
    </p>
    <div class="canvas-view">
      <canvas id="canvas" width="120" height="120"></canvas>
    </div>
  </div>
</div>


</body>
</html>
